import React, { useState, useEffect } from 'react'
import CustomTable from './table'
import {Space, Button, message} from 'antd'
import FormModal from './form-modal'
import moment from 'moment'
import XLSX from 'xlsx'
import { addMessage, changeMessage, DeleteMessage, getMessages } from '../../api/messages'

// export default class index extends React.Component {
//   render() {
//     return (
//       <div>
//         <Space>
//           <Button type="primary">添加</Button>
//           <Button type="primary">导出Excel</Button>
//         </Space>

//         <CustomTable dataSoure={{}} />

//         <FormModal />
//       </div>
//     )
//   }
// }


const Message = () => {

  const [visible, setVisible] = useState(false)

  const [editType, setEditType] = useState('create')
  
  const [editMessage, setEditMessage] = useState({})

  //定义表格数据源使用到状态数据
  const [data, setData] = useState([])

  const [total, setTotal] = useState(0)

  const [pageSize, setPageSize] = useState(5)

  const getMessagesHandler = async (page, pageSize) => {
    const res = await getMessages({page, pageSize})
    setData(res.list)
    setTotal(res.total)
    setPageSize(Number(res.pageSize))
 }


  //保存/修改登记
  const save = async (info) => {
    if(editType === 'create') {//添加
     await addMessage(info)
    }else {//修改
      await changeMessage(info)
      setData(data.map(message => {
        if (message._id === info._id) {
          return info
        }
        return message
      }))
    }
    setVisible(false)
  }

  const modifyHandler = editMessage => {
    setVisible(true)
    setEditType('updata')
    setEditMessage(editMessage)
  }
  const deleteHandler = async _id => {
    await DeleteMessage(_id)
    setData(data.filter(message => message._id !== _id))
  }

  const exportFile = () => {
    const messages = [
      ['编号', '姓名', '性别', '身份证', '地址', '电话', '到访时间']
    ]
    data.forEach(({_id, name, sex, cid, address, phone, createdAt}) => {
      message.push([
        _id, name, sex, cid, address, phone, moment(createdAt).format('YYYY-MM-DD HH-mm-ss')
      ])
    })

    const ws = XLSX.utils.aoa_to_sheet(messages);
    // 创建工作簿
    const wb = XLSX.utils.book_new();
    // 将工作表追加到工作簿中
		XLSX.utils.book_append_sheet(wb, ws, "登记信息");
		// 将内存中工作簿内容写入到具体的文件中
		XLSX.writeFile(wb, "messages.xlsx")
  }

  useEffect(() => {
    // getMessages()
    //   .then(res => {
    //     console.log(res)
    //     setData(res.list)
    //     setTotal(res.total)
    //     setPageSize(res.pageSize)
    //   })
    getMessagesHandler()
  }, [])
  return (
    <div>
      <Space>
        <Button
         type="primary"
         onClick={() => {
           setVisible(true)
           setEditType('create')
          }}
        >添加</Button>
        <Button type="primary">导出Excel</Button>
      </Space>

      <CustomTable
        total={total}
        pageSize={pageSize}
        dataSource={data}
        setEditMessage={modifyHandler}
        RemoveMessage={_id => deleteHandler(_id)}
        onPageChange={getMessagesHandler}
      />

      <FormModal
         visible={visible}
         onCancel={() => setVisible(false)}
         onCreate={save}
         editType={editType}
         editMessage={editMessage}
      />
    </div>
  )
}

export default Message
